<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        选择器
        1，标签选择器
        2，class选择器
        3，通配符
        4，id选择器 一阶段不常用
            a,在样式表里以#你自己取的名字{}  如，#all{color:red;}
            b,在标签上用id调用  <div id="all"></div>
            id选择器具有唯一性,属性值只能是一个
        5,群组选择器
            把相同的代码组合到一起，用逗号隔开
        6,后代选择器（包含选择器）
            语法： 选择器1 选择器2{属性:属性值;....} 最终改的是选择器2

        7,伪类选择器
            a{}
            a:hover{}
            如果就是默认的和鼠标划上的，a的:link建议不写

            如果四种状态全写的情况，必须要按照顺序

     -->
     <style>
         a:link{
             /* 默认的 */
             color:red;
         }
         a:visited{
             color:blue;
             /* 访问后 a标签的状态 */
         }
         a:hover{
             /* 鼠标划上a标签    a:hover最终改的是a标签，只不是a的一种状态 */
             color:yellow;
         }
         a:active{
             color: pink;
             /* 鼠标激活（按下）a标签 */
         }
         .box:hover{
             background-color:yellow;
         }
         .box:hover span{
             color:pink;
         }
         .box span:hover{
             color:red;
         }
     </style>
</head>
<body>
   <a href="#">态度决定一切</a> 
   <div class="box">
       不想上班
        <span>文字</span>
   </div>
</body>
</html>